<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var app = {};
    let option;

    // var chartDom = document.getElementById('main');


    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {type: 'cross'}
        },
        legend: {},
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: [
                    '1月',
                    '2月'
                ]
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '降水量',
                min: 0,
                max: 250,
                position: 'right',
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                position: 'left',
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '降水量',
                type: 'line',
                smooth: true,
                yAxisIndex: 0,
                data: [{
                    value: 110,
                    name: 888,

                }, {
                    value: 99,
                    name: 7777
                },]
            },
            {
                name: '温度',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                data: [
                    6.0,
                    {
                        value: 10.2,
                        itemStyle: {
                            color: '#75a1cc',
                            shadowColor: '#e83ee6',
                            borderType: 'dashed',
                            opacity: 0.5
                        }
                    }
                ]
            }
        ]
    };


    option && myChart.setOption(option);

</script>
</body>
</html>
